<template>
	<view v-if="showFlag">
		<view class="header">
			<image src="../../../static/img/index/header.png" mode=""></image>
			<!-- 轮播 -->
			<swiper
				class="swiper"
				indicator-color="rgba(255, 255, 255, 0.6)"
				indicator-active-color="rgba(255, 255, 255, 1)"
				@animationfinish="animationChange"
				:circular="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				:current="swiperCurrent"
			>
				<swiper-item @click="perviewImg(item, index)" v-for="(item, index) in swiperImg" :key="'img' + index">
					<image class="swiper-item" :src="item.image" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<!-- <view class="dots">
				<block v-for="(item, index) in swiperImg.length" :key="'dots'+index"><view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view></block>
			</view> -->
			<!-- 消息头条 -->
			<view class="msg">
				<view class="msgHeadlines">
					<text>消息头条：</text>
					<!-- <view>{{ msg.title }}</view> -->
					<view class="" style="margin-top: -10rpx;">
						<u-notice-bar @click="infoHandle" font-size="24" :is-circular="false" :volume-icon="false" type="none" mode="vertical" :list="list"></u-notice-bar>
					</view>
				</view>
				<view class="viewMore" @click="onSwitchTab"><text>查看更多</text></view>
			</view>
		</view>
		<view class="banner" @click="onNavigateTo('/pages/tabbar/index/coupon')"><image src="../../../static/img/index/coupon.png" mode=""></image></view>
		<view class="recharge"  @click="onNavigateTo('/pages/tabbar/personCenter/myWallet/recharge')" >
			<image src="/static/img/index/money.png" mode=""></image>
			<text>会员充值 - 多充多送</text>
			<view class="">
				充值
			</view>
		</view>
		<!-- 训练预约 -->
		<view class="train borderBottom10">
			<view class="train_left">
				<view class="blueBot"></view>
				<text>训练预约</text>
			</view>
			<view class="more" @click="onNavigateTo('/pages/selectTeacher/searchTeacher?type=' + typeIndex)">
				<text>更多</text>
				<text class="iconfont">&#xe79a;</text>
			</view>
		</view>
		<view class="typeList">
			<text
				:style="{ borderColor: typeIndex == index ? '#4b76f9' : '', color: typeIndex == index ? '#4b76f9' : '#333' }"
				@click="typeHandle(index)"
				v-for="(item, index) in typeList"
				:key="index"
			>
				{{ item }}
			</text>
		</view>
		<!-- 教练详情 -->
		<view class="list" v-show="typeIndex == 0">
			<view v-for="(item, index) in teachersList" :key="'a' + index" @click="onNavigateTo('/pages/teacherSubscribe/teacherDetail?type=1&id=' + item.id)">
				<view class="teachersDetails">
					<view class="teacherImg"><image :src="item.image ? item.image : ''" mode=""></image></view>
					<view class="introduce">
						<view class="teacherName">
							<text>{{ item.name }}</text>
							<text>{{ item.drive_age ? '驾龄' + item.drive_age + '年' : '' }}</text>
						</view>
						<uni-rate size="20" disabled="true" :value="item.star"></uni-rate>
						<view class="skillList">
							<text v-if="item.tags[0] != ''" class="characteristic" v-for="(ele, index1) in item.tags" :key="'b' + index1">{{ ele }}</text>
						</view>
					</view>
					<view @click.stop="onNavigateTo('/pages/teacherSubscribe/teacherSubscribe?type=1&teacher=' + JSON.stringify(item))" class="immediately">立即预约</view>
				</view>
			</view>
		</view>
		<view class="list" v-show="typeIndex == 1">
			<view v-for="(item, index) in testList" :key="'a' + index" @click="onNavigateTo('/pages/teacherSubscribe/teacherDetail?type=2&id=' + item.id)">
				<view class="teachersDetails">
					<view class="teacherImg"><image :src="item.image ? item.image : ''" mode=""></image></view>
					<view class="introduce">
						<view class="teacherName">
							<text>{{ item.name }}</text>
							<text>{{ item.drive_age ? '驾龄' + item.drive_age + '年' : '' }}</text>
						</view>
						<uni-rate size="20" disabled="true" :value="item.star"></uni-rate>
						<view class="skillList">
							<view class="characteristic" v-for="(ele, index1) in item.tags" :key="'b' + index1">{{ ele }}</view>
						</view>
					</view>
					<view @click.stop="onNavigateTo('/pages/teacherSubscribe/testSubscribe?type=2&teacher=' + JSON.stringify(item))" class="immediately">立即预约</view>
				</view>
			</view>
		</view>
		<view class="loading">{{ loadingText }}</view>
	</view>
</template>

<script>
import { wxSign } from '@/api/wxSign/wxSign.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import { wxindex } from '@/api/user/index/index.js';
import { login } from '@/api/login/login.js';
import { info } from '@/api/user/info/info.js';
export default {
	components: {
		uniRate
	},
	data() {
		return {
			loadingText: '加载中...', //加载状态
			showFlag: false,
			swiperCurrent: 1,
			msg: '',
			swiperImg: [],
			teachersList: [],
			list: [],
			testList: [],
			infoList: [],
			page: 1,
			testPage: 1,
			typeList: ['考试车', '教练车'],
			typeIndex: 0
		};
	},
	async onShow() {
		let res;
		if (this.typeIndex == 0) {
			res = await wxindex(this.page++, 1);
		} else {
			res = await wxindex(this.testPage++, 2);
		}

		this.swiperImg = res.data.adslist;
		this.getTeacherList(res);
		this.msg = res.data.artlist[0];
		this.showFlag = true;
	},
	async onLoad(options) {
		let code = this.getUrlParam('code');
		let id = uni.getStorageSync('shareId');
		let res;
		if (code) {
			if (code) {
				if (id) {
					res = await login(code, id);
				} else {
					res = await login(code);
				}
				uni.setStorageSync('userToken', res.data.userinfo.token);
			}
			window.location.href = 'http://qianhe.westts.cn/index.html';
		}
		this.shareAll();
	},
	async mounted() {
		let res = await info(4);
		res.data.artlist.data.forEach((item, index) => {
			if (index > 5) {
				return;
			} else {
				this.list.push(item.title);
			}
		});
		this.infoList = res.data.artlist.data;
	},
	// 监听触底
	onReachBottom() {
		if (this.typeIndex == 0) {
			this.loadMore(1);
		} else {
			this.loadMore(2);
		}
	},
	methods: {
		typeHandle(index) {
			this.typeIndex = index;
			if (index == 0) {
				this.loadMore(1);
			} else {
				this.loadMore(2);
			}
		},
		getTeacherList(res) {
			if (this.typeIndex == 0) {
				for (let i = 0; i < res.data.coach.data.length; i++) {
					res.data.coach.data[i].tags = res.data.coach.data[i].tags.split(',');
				}

				if (this.page == 1) {
					this.teachersList = res.data.coach.data;
				} else {
					this.teachersList = this.teachersList.concat(res.data.coach.data);
				}
			} else {
				for (let i = 0; i < res.data.coach.data.length; i++) {
					res.data.coach.data[i].tags = res.data.coach.data[i].tags.split(',');
				}

				if (this.testPage == 1) {
					this.testList = res.data.coach.data;
				} else {
					this.testList = this.testList.concat(res.data.coach.data);
				}
			}
		},
		async loadMore(index) {
			let res;
			if (index == 1) {
				res = await wxindex(this.page++, index);
			} else {
				res = await wxindex(this.testPage++, index);
			}

			if (res.data.coach.data.length == 0) {
				this.loadingText = '没有数据了！';
			} else if (res.data.coach.data.length < 10) {
				this.loadingText = '没有数据了！';
			} else {
				this.loadingText = '加载中';
			}
			this.getTeacherList(res);
		},
		animationChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		onNavigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		infoHandle(e) {
			uni.navigateTo({
				url: '/pages/tabbar/info/infoDetail?id=' + this.infoList[e].id
			});
		},
		getUrlParam(name) {
			let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
			let r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			}
			return null;
		},
		async shareAll() {
			let res = await wxSign();
			let local = 'http://qianhe.westts.cn/index.html';
			let shareContent = res.data.share;
			if ((res.code = 1)) {
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.data.wxaccessdata.appId, // 必填，公众号的唯一标识
					timestamp: res.data.wxaccessdata.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.data.wxaccessdata.nonceStr, // 必填，生成签名的随机串
					signature: res.data.wxaccessdata.signature, // 必填，签名，见附录1
					jsApiList: [
						'onMenuShareAppMessage', //微信分享
						'onMenuShareTimeline', //微信分享
						'chooseWXPay', //微信支付
						'showOptionMenu',
						'updateAppMessageShareData',
						'hideMenuItems',
						'showMenuItems'
					]
				});
				wx.ready(function() {
					// wx.updateAppMessageShareData({
					// 	title: shareContent.sharetitle, // 分享标题
					// 	desc: shareContent.sharedesc,
					// 	link: local + '?id=' + res.data.share.shareid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					// 	imgUrl: shareContent.shareimg, // 分享图标
					// 	success: function() {}
					// });
					// wx.onMenuShareWeibo({
					// 	title: shareContent.sharetitle, // 分享标题
					// 	desc: shareContent.sharedesc,
					// 	link: local + '?id=' + res.data.share.shareid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					// 	imgUrl: shareContent.shareimg, // 分享图标
					// 	success: function() {}
					// });
					wx.onMenuShareAppMessage({
						title: shareContent.sharetitle, // 分享标题
						desc: shareContent.sharedesc,
						link: 'http://qianhe.westts.cn/index.html?id=' + res.data.share.shareid + '#/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'http://qianhe.westts.cn' + shareContent.shareimg, // 分享图标
						success: function() {}
					});
					wx.onMenuShareTimeline({
						title: shareContent.sharetitle, // 分享标题
						link: 'http://qianhe.westts.cn/index.html?id=' + res.data.share.shareid + '#/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'http://qianhe.westts.cn' + shareContent.shareimg, // 分享图标
						success: function() {
							// 用户点击了分享后执行的回调函数
						}
					});
					// wx.updateTimelineShareData({
					// 	title: shareContent.sharetitle, // 分享标题
					// 	link: local + '?id=' + res.data.share.shareid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					// 	imgUrl: shareContent.shareimg, // 分享图标
					// 	success: function() {}
					// });
				});
			}
		},
		onSwitchTab(url) {
			uni.setStorageSync('infoId', '4');
			uni.switchTab({
				url: '/pages/tabbar/info/info'
			});
		},
		perviewImg(item, index) {
			// let urls = [];
			// this.swiperImg.forEach(item => {
			// 	urls.push(item.image);
			// });

			// uni.previewImage({
			// 	urls: urls,
			// 	current: urls[index],
			// 	indicator: 'number'
			// });
			if (item.url) {
				window.location.href = item.url;
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/index.scss';
</style>
